<template>
  <div class="minercalc-boxs">
    <!-- 左侧盒子 -->
    <span class="minercalc-box__title" style="font-size: 24px;">{{$t("message.BTC")}}</span>
    <!-- 中间盒子 -->
    <span class="minercalc-box__middle"  v-if="flag">
      <i class="el-icon-search" ></i>
      <input type="text" :placeholder=" $t('message.import')" class="search" v-model="search">
    </span>
    <!-- 右侧电费盒子 -->
    <div class="minercalc-box__powerConsume">
      <span class="ml20">
        <label>{{$t("message.electrovalence")}}:</label>
      </span>
      <i
        class="el-icon-remove-outline"
        style="color: rgb(13, 111, 184); font-size: 17px; cursor: pointer;"
        @click="less"
      ></i>
      <div class="inputDiv">
        <span class="input-unit"></span>
        <div style="display: inline-block;">
          <input
            type="number"
            min="0"
            max="10"
            step="0.01"
            required="required"
            style="width: 57px;"
            v-model="aa"
          >
        </div>
        <span>kW/h</span>
      </div>
      <i
        class="el-icon-circle-plus-outline"
        style="color: rgb(13, 111, 184); font-size: 17px; cursor: pointer;"
        @click="plus"
      ></i>
    </div>
    <!-- 表格 -->
    <el-table
      :data="newList.slice(0,i)"
      style="width: 100%"
      :default-sort="{prop: 'miner_type', order: 'descending'}"
      stripe
    >
      <el-table-column prop="miner_type" :label="$t('message.minerType')" sortable width="175">
        <!-- 为了实现每个选项都能点 -->
        <!-- <template slot-scope="scope">
            <a href=""> {{scope.row}}</a> 
        </template>-->
      </el-table-column>
     <el-table-column prop="currency_name" :label="$t('message.currency')" sortable width="100"></el-table-column>
      <el-table-column prop="share" :label="$t('message.share')" sortable width="125"></el-table-column>
      <el-table-column prop="power_waste" :label="$t('message.powerWaste')" sortable width="105"></el-table-column>
      <el-table-column prop="output" :label="$t('message.output')" sortable width="110"></el-table-column>
      <el-table-column prop="eletricCharge" :label="$t('message.eletricCharge')" sortable width="140"></el-table-column>
      <el-table-column prop="profit" :label="$t('message.profit')" sortable width="140"></el-table-column>
      <el-table-column prop="proportion" :label="$t('message.proportion')" sortable width="203">
        <template slot-scope="scope">
          <el-progress
            :text-inside="true"
            :stroke-width="30"
            :percentage="scope.row.proportion"
            :color="scope.row.color"
            status="exception"
          ></el-progress>
        </template>
      </el-table-column>
      <!-- 插槽 -->
      <p slot="append" style="text-align:center; line-height:50px;" v-loading="loading">
        <el-button round @click="loadMore" class="blue01" v-if="i<tableData.length">{{$t("message.loadMore")}}</el-button>
        <el-button round v-else>{{$t("message.noMore")}}</el-button>
      </p>
    </el-table>
  </div>
</template>
<script>
import { btcMiners } from "@/api";
export default {
  data() {
    return {
      //搜索框标识
      flag:true,
      //屏幕宽度
       screenWidth: document.body.clientWidth,
      //搜索框
      search: "",
      //电费
      aa: "0.30",
      //币价
      coinPrice: "37360.42",
      //加载状态
      loading: false,
      //显示条数
      i: 5,
      //列表数据
      tableData: []
    };
  },
  created() {
    ////获取支持比特币的矿机列表
    btcMiners().then(res => {
      console.log(res, 998);
      this.tableData = res.data.data.list;
      var dataNumber = res.data.data.shareRate;
      //利用系数获取产出值
      this.tableData.forEach(item => {
        item.output = (
          parseFloat(dataNumber) *
          parseFloat(item.share) *
          this.coinPrice
        ).toFixed(2);
        //电费=功耗*电价
        item.eletricCharge = (
          ((parseFloat(item.power_waste) * parseFloat(this.aa)) / 1000) *
          24
        ).toFixed(2);
        //利润=产出-电费
        item.profit = (
          parseFloat(item.output) - parseFloat(item.eletricCharge)
        ).toFixed(2);
        //电费占比
        item.proportion = parseFloat(
          (parseFloat(item.eletricCharge / item.output) * 100).toFixed(2)
        );
        //颜色判断
        this.tableData.map(item => {
          if (item.proportion <= 30) {
            item.color = "#58ca96";
          } else if (item.proportion <= 50) {
            item.color = "#a0e486";
          } else if (item.proportion <= 99) {
            item.color = "#fd8f00";
          } else {
            item.color = "#dc433d";
          }
        });
      });
    });
  },
  mounted() {
    //监听滚动来实现表头固定
    window.addEventListener("scroll", this.handleScroll);
    //监听屏幕宽度
    let that = this;
    window.addEventListener("resize", function() {
      return (() => {
        that.screenWidth = document.body.clientWidth;
      })();
    });
  },
  //滚动事件要销毁
  beforeDestroy() {
                    window.removeEventListener("scroll",this.handleScroll)
            },
  watch: {
    //动态修改电费改变值
    aa: function(newValue, oldValue) {
      this.aa = newValue;
      //电费支出
      this.tableData.forEach(item => {
        item.eletricCharge = (
          ((parseFloat(item.power_waste) * parseFloat(this.aa)) / 1000) *
          24
        ).toFixed(2);
        item.profit = (
          parseFloat(item.output) - parseFloat(item.eletricCharge)
        ).toFixed(2);
        if (parseFloat(item.eletricCharge / item.output).toFixed(2) < 1) {
          item.proportion = parseFloat(
            (parseFloat(item.eletricCharge / item.output) * 100).toFixed(2)
          );
          //根据百分比数据获取颜色值
          if (item.proportion <= 30) {
            item.color = "#58ca96";
          } else if (item.proportion <= 50) {
            item.color = "#a0e486";
          } else if (item.proportion <= 99) {
            item.color = "#fd8f00";
          } 
        } else {
          item.proportion = 100;
          item.color = "#dc433d";
        }
      });
    },
   //监听屏幕宽度改变实现响应式
    screenWidth(val) {
      this.screenWidth = val;
      if (this.screenWidth < 900) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    }
  },
  computed: {
    //过滤搜索
    newList() {
      return this.tableData.filter(item => {
        return item.miner_type.match(this.search);
      });
    }
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
    //加号
    plus() {
      this.aa = (parseFloat(this.aa) + 0.10).toFixed(2);
    },
    //减号
    less() {
      if (this.aa <= 0.10) {
        this.aa = 0.10;
      } else {
        this.aa = (parseFloat(this.aa) - 0.10).toFixed(2);
      }
    },
    //点击加载更多
    getData() {
      let me = this;
      //获取数据，在获取数据成功后，则关闭loading效果
      me.loading = false;
    },
    loadMore: function() {
      this.loading = true;
      var that = this;
      setInterval(() => {
        that.i += 20;
        that.getData();
      }, 1000);
    },
    //滚动事件
    handleScroll() {
      //滚动距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //表头到顶的距离
      let offsetTop = document.querySelector(".el-table").offsetTop;
      //滚动出固定距离
      if (scrollTop > offsetTop) {
        document.querySelector(".el-table__header-wrapper").style.position =
          "fixed";
        document.querySelector(".el-table__header-wrapper").style.top = 0;
        document.querySelector(".el-table__header-wrapper").style.zIndex = 999;
      } else {
        document.querySelector(".el-table__header-wrapper").style = "";
      }
    }
  }
};
</script>
<style lang="less" scoped>
.el-main {
  background-color: #f6f6f6;
  color: #333;
  text-align: center;
  //列表盒子
  .minercalc-boxs {
    width: 64%;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    margin: 0 auto;
    padding: 50px;
    box-sizing: border-box;
    background-color: #fff;

    /deep/td.el-table_1_column_8 {
      padding: 14px 40px 14px 0;
      /deep/div.el-progress-bar__inner {
        text-align: left;
        font-weight: 900;
        font-size: 10px;
        color: #333;
      }
    }

    //  标题盒子左侧
    .minercalc-box__title {
      float: left;
      margin-left: 20px;
      margin-bottom: 30px;
      font-size: 24px!important;
    }
    //中间盒子
    .minercalc-box__middle {
      position: relative;

      .el-icon-search {
        position: absolute;
        top: 2px;
        left: 250px;
        font-size: 20px;
      }
      .search {
        box-sizing: border-box;
        padding-left: 6px;
        height: 30px;
        width: 280px;
        border: none;
        border: 1px solid #ccc;
        border-radius: 6px;
        outline: none;
      }
    }
    //标题盒子右侧
    .minercalc-box__powerConsume {
      text-align: center;
      font-size: 14px;
      float: right;
      margin-top: 10px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      .inputDiv {
        border-bottom: 1px solid #0d6fb8;
        display: inline-block;
        span:first-child {
          font-size: 18px;
          font-weight: 500;
          margin-right: 3px;
        }
        span:last-child {
          margin-left: 5px;
          display: inline-block;
          color: #333;
          font-size: 12px;
          font-weight: 400;
        }

        input {
          font-size: 18px;
          font-weight: 500;
          border: 0;
          background-color: #fff;
          &:disabled {
            background: #f8f8f8;
            cursor: not-allowed;
          }
          //去除数字框右边加减号
          &[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
          }
          //聚焦
          &:focus {
            border: 0;
            outline: none;
          }
        }
      }
    }
  }
}
.el-table {
  margin: 0 auto;
 
}
//单元格行高清空
 /deep/div.cell{
    line-height:32px;
  }
//表头颜色
/deep/[data-v-154ff1ca] .el-table__header-wrapper .el-table__header th {
  background-color: #171a23;
  padding: 0;
}
//进度条字体颜色
/deep/.el-progress-bar__innerText {
  color: #171a23;
}
//表头文字大小
/deep/.el-table th>.cell{
  font-size: 12px;
  font-weight: 800;
}
</style>